<template>
  <div class="addDialog">
    <!-- 新增 -->
    <el-form :model="addform"
             :rules="rules"
             ref="ruleForm"
             label-width="100px">
      <el-form-item label="来源"
                    prop="origin_id"
                    class="selectWidth">
        <el-select v-model="addform.origin_id"
                   @change="changeBus"
                   placeholder="请选择业务">
          <el-option v-for="option in busArr"
                     :key="option.busi_cate_id"
                     :value="option.busi_cate_id"
                     :label="option.busi_cate_name"></el-option>
        </el-select>
        <el-select v-model="appName"
                   placeholder="请选择应用">
          <el-option v-for="option in appArr"
                     :key="option.id"
                     :value="option.name"
                     :label="option.name"></el-option>
        </el-select>
        <el-select v-model="appName"
                   placeholder="请选择页面">
          <el-option v-for="option in pageArr"
                     :key="option.id"
                     :value="option.name"
                     :label="option.name"></el-option>
        </el-select>
        <el-button type="primary"
                   @click="addBusiness">新增业务</el-button>
      </el-form-item>
      <el-form-item label="内容"
                    prop="content">
        <el-input v-model="addform.content"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="预警数据"
                    prop="alarm_data">
        <el-input v-model="addform.alarm_data"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="消息时间"
                    prop="alarm_date">
        <el-date-picker v-model="addform.alarm_date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="风险类型"
                    prop="alarm_type">
        <el-select v-model="addform.alarm_type"
                   placeholder="请选择风险类型">
          <el-option v-for="option in riskType"
                     :key="option.order_no"
                     :value="option.order_no"
                     :label="option.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态"
                    prop="deal_status">
        <el-select v-model="addform.deal_status"
                   placeholder="请选择处理状态">
          <el-option v-for="option in disposeArr"
                     :key="option.order_no"
                     :value="option.order_no"
                     :label="option.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">取 消</el-button>
      <el-button type="primary"
                 @click="addRecord('ruleForm')">确 定</el-button>
    </div>
    <!-- 新增业务 -->
    <el-dialog title="新增业务"
               :visible.sync="dialogbusinessVisible"
               append-to-body>
      <el-form :model="businessform"
               label-width="100px">
        <el-form-item>
          <el-button type="primary"
                     @click="addLine">增行</el-button>
        </el-form-item>
        <el-form-item label="业务名称"
                      class="inputWidth"
                      v-for="(item,index) in businessform.businessList"
                      :key="index">
          <el-input v-model="item.busi_cate_name"
                    placeholder="请输入业务名称"
                    autocomplete="off"></el-input>
          <el-button @click="deleteItem(item, index)"
                     type="danger">删除</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetAdd">取 消</el-button>
        <el-button type="primary"
                   @click="saveAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { standardCodeApi } from "@/services/StandardCode";
import { MessageCenterApi } from '@/services/ProjectCenter';

export default {
  props: {
    types: String,
    objRow: String,
  },
  data () {
    return {
      rules: {
        origin_id: [{ required: true, message: '请选择业务', trigger: ['blur', 'change'] }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        alarm_data: [{ required: true, message: '请输入预警数据', trigger: 'blur' }],
        alarm_date: [{ required: true, message: '请选择消息时间', trigger: 'blur' }],
        alarm_type: [{ required: true, message: '请选择风险类型', trigger: ['blur', 'change'] }],
        deal_status: [{ required: true, message: '请选择处理状态', trigger: ['blur', 'change'] }],
      },
      dialogFormVisible: false,
      appName: '',
      pidId: '',
      busArr: [], //业务列表
      appArr: [], //应用
      pageArr: [], //页面
      project_id: '',
      riskType: [], //风险类型
      disposeArr: [], //处理状态
      dialogbusinessVisible: false,
      addform: {
        alarm_id: '',
        origin_id: '',
        content: '',
        alarm_data: '',
        alarm_date: '',
        alarm_type: '',
        deal_status: '',
        project_id: ''
      },
      businessform: {
        businessList: [],
      },
      alarmId: '',
    }
  },
  created () {
  },
  mounted () {
    this.project_id = this.$store.state.choosedProject.project_id
    this.getBusiness()
    this.getStandard()
    this.getriskStandard()

    if (this.types === 'edit') {
      this.detailWarn()
    }
  },
  methods: {
    // 处理状态标准码
    getStandard () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'conlaborDeal_status',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.disposeArr = res.data.list;
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //预警类型
    getriskStandard () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'conlaborAlarmType',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.riskType = res.data.list;
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //业务下拉列表
    getBusiness () {
      MessageCenterApi.businessSelectList({
        params: {
          p_id: this.pidId === '' ? '' : this.pidId,
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.busArr = res.data.list
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //详情
    detailWarn () {
      this.alarmId = JSON.parse(this.objRow).alarm_id
      MessageCenterApi.detailWarnList({
        params: {
          alarm_id: this.alarmId
        }
      }).then((res) => {
        if (res.code == 0) {
          this.addform = res.data
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //新增预警纪录
    addRecord (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addform.project_id = this.project_id
          if (this.types === 'edit') {
            this.addform.alarm_id = JSON.parse(this.objRow).alarm_id
          } else {
            this.addform.alarm_id = ''
          }
          MessageCenterApi.saveWarn({
            data: this.addform
          }).then((res) => {
            if (res.code == 0) {
              if (this.types === 'edit') {
                this.$message.success('编辑成功')
              } else {
                this.$message.success('新增成功')
              }
              this.$refs[formName].resetFields();
              this.$emit('addDialog', false)
              this.$emit('add', 'success')
            }
          }).catch((error) => {
            console.log(error)
          });
        }
      })
    },
    resetForm (formName) {
      if (this.types === 'add') {
        this.$refs[formName].resetFields();
      }

      this.$emit('addDialog', false)
    },
    //切换业务
    changeBus (val) {
      // console.log(val);
      // this.pidId = val
      // this.getBusiness()
    },
    //新增业务
    addBusiness () {
      this.dialogbusinessVisible = true
    },
    //增行
    addLine () {
      let line = {
        p_id: '',
        project_id: this.project_id,
        busi_cate_name: ''
      }
      this.businessform.businessList.push(line)
    },
    //保存新增业务
    saveAdd () {
      MessageCenterApi.addBusinessList({
        data: {
          busi_cate_data: this.businessform.businessList
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('新增成功')
          this.getBusiness()
          this.businessform.businessList = []
          this.dialogbusinessVisible = false
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //取消新增业务
    resetAdd () {
      this.businessform.businessList = []
      this.dialogbusinessVisible = false
    },
    deleteItem (item, index) {
      this.businessform.businessList.splice(index, 1)
    }
  },
  computed: {},
  watch: {
    '$store.state.choosedProject.project_id': function (val) {
      this.project_id = val;
    },
    'objRow': function (val) {
      if (JSON.parse(this.objRow).alarm_id !== '') {
        this.detailWarn()
      }

    },
    'types': function (val) {
      if (val === 'add') {
        this.$refs.ruleForm.resetFields();
      } else {
        this.detailWarn()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addDialog {
  .selectWidth {
    .el-select {
      width: 26%;
    }
    .el-button {
      margin-left: 10px;
    }
  }
  .el-input,
  .el-date-editor,
  .el-select {
    width: 79%;
  }
}
.inputWidth {
  .el-input {
    width: 80%;
  }
}
</style>
